<template>
  <div class="site-management">
    <!-- 搜索区域 -->
    <div class="search-section mb-4">
      <el-form :inline="true" :model="searchForm" class="flex items-center flex-wrap gap-4">
        <el-form-item label="场地名称">
          <el-input v-model="searchForm.name" placeholder="请输入场地名称" clearable class="w-60" />
        </el-form-item>
        <!-- <el-form-item label="场地状态">
                  <el-select filterable  v-model="searchForm.status" placeholder="请选择场地状态" clearable class="w-60">
                    <el-option label="空闲" value="free" />
                    <el-option label="使用中" value="inUse" />
                    <el-option label="维护中" value="maintenance" />
                  </el-select>
                </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <i class="el-icon-search mr-1"></i>搜索
          </el-button>
          <el-button @click="handleReset">
            <i class="el-icon-refresh mr-1"></i>重置
          </el-button>
        </el-form-item>
        <el-button type="primary" @click="handleAdd" style="margin-left: 30px" v-has="'venue:save'">
          <i class="el-icon-plus mr-1"></i>新增场地
        </el-button>
      </el-form>
    </div>
  
    <!-- 表格区域 -->
    <el-table v-loading="loading" :data="tableData" border stripe style="width: 100%">
      <el-table-column prop="name" label="场地名称" />
      <!-- <el-table-column prop="type" label="场地分类" min-width="120" /> -->
      <el-table-column prop="address" label="地址" align="center" />
      <el-table-column prop="startTime" label="营业时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.startTime }} - {{ scope.row.endTime }}
        </template>
      </el-table-column>
      <el-table-column prop="phoneNumber" label="电话" align="center" />
      <!-- <el-table-column prop="description" label="场地描述" width="100" align="center" >
  
        </el-table-column> -->
      <el-table-column prop="area" label="封面图片" width="120" align="center">
        <template slot-scope="scope">
          <el-image v-if="scope.row.coverImage" style="width: 90px; height: 90px" :src="scope.row.coverImage" :preview-src-list="[scope.row.coverImage]"
            fit="cover" />
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center">
        <template slot-scope="{ row }">
          <el-tag :type="getStatusType(row.status)">
            {{ row.status == 0 ? '下架' : '上架' }}
          </el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="createTime" label="创建时间" width="180" align="center" /> -->
      <el-table-column label="操作" width="150" fixed="right" align="center">
        <template slot-scope="{ row }">
          <el-button type="text" @click="handleEdit(row)" v-has="'venue:update'">
            编辑
          </el-button>
          <!-- <el-button type="text" @click="handleView(row)" v-has="'venue:info'">
                查看
              </el-button> -->
          <el-button type="text" class="text-red-500" v-has="'venue:delete'" @click="handleDelete(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  
    <!-- 分页区域 -->
    <div class="pagination-section mt-4 flex justify-end">
      <el-pagination :current-page.sync="currentPage" :page-size.sync="pageSize" :total="total"
        :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
    <site-dialog :visible.sync="dialogVisible" :edit-data="editData" @success="handleSuccess" />
  </div>
</template>

<script>
import SiteDialog from './components/siteDialog.vue'
export default {
  name: 'SiteManagement',

  data() {
    return {
      // 搜索表单
      searchForm: {
        name: '',
        // status: ''
      },
      // 表格数据
      loading: false,
      tableData: [],
      // 分页参数
      currentPage: 1,
      pageSize: 10,
      total: 0,
      dialogVisible: false,
      editData: {}
    }
  },
  components: {
    SiteDialog
  },
  created() {
    this.fetchData()
    this.queryDictList()
  },

  methods: {
    async queryDictList() {
      const data = await this.$api.getDictList()
      console.log(data, 'data字典');
    },
    handleAdd() {
      this.editData = {}
      this.dialogVisible = true
    },
    handleEdit(row) {
      console.log(row, '111')
      this.editData = { ...row }
      this.dialogVisible = true
    },
    handleSuccess() {
      this.fetchData()
    },
    // 获取状态类型
    getStatusType(status) {
      const statusMap = {
        1: 'success',
        0: 'warning',
        // maintenance: 'info'
      }
      return statusMap[status] || 'info'
    },

    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        free: '空闲',
        inUse: '使用中',
        maintenance: '维护中'
      }
      return statusMap[status] || '未知'
    },

    // 搜索
    handleSearch() {
      this.currentPage = 1
      this.fetchData()
    },

    // 重置
    handleReset() {
      this.searchForm.name = ''
      this.searchForm.status = ''
      this.handleSearch()
    },

    // 查看场地
    handleView(row) {
      // 实现查看场地逻辑
    },

    // 删除场地
    handleDelete(row) {
      this.$confirm('确定要删除该场地吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 实现删除场地逻辑
        await this.$api.deleteSite(row.id);
        this.$message.success('删除成功');
        this.fetchData()
      }).catch(() => { })
    },

    // 处理每页条数变化
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },

    // 处理页码变化
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData()
    },

    // 获取表格数据
    async fetchData() {
      this.loading = true
      try {
        console.log(this.$api)
        // 这里调用接口获取数据
        const res = await this.$api.siteVenue({
          page: this.currentPage,
          pageSize: this.pageSize,
          condition: {
            ...this.searchForm
          }
        })
        console.log(res.data, 11111)
        this.tableData = res.data.result.records
        this.total = res.data.result.total
      } catch (error) {
        console.error('获取场地列表失败：', error)
        this.$message.error('获取场地列表失败')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>
.text-red-500{
  color: red;
}
.site-management {
  padding: 20px;
}
</style>